<template>
  <div v-loading="isLoading" class="blog-container">
    <Layout>
      <BlogList :blogObj="data" :routerInfo="routerInfo" :loading="isLoading" />
      <template slot="right">
        <BlogCategory />
      </template>
    </Layout>
  </div>
</template>

<script>
import { StackContents, BlogList, BlogCategory } from "./components";
import Layout from "@/components/Layout";
import { getBlog } from "@/api/blog.js";
import fetchData from "@/mixins/fetchData.js";
export default {
  name: "Blog",
  components: {
    Layout,
    BlogList,
    BlogCategory,
    StackContents,
  },
  mixins: [fetchData({})],
  data() {
    return {};
  },
  watch: {
    async $route(newRoute, oldRoute) {
      this.isLoading = true;
      this.data = await this.fetchData();
      this.isLoading = false;
    },
  },
  computed: {
    routerInfo() {
      const categoryId = +this.$route.params.categoryId || -1;
      const page = +this.$route.query.page || 1;
      const limit = +this.$route.query.limit || 10;
      return {
        categoryId,
        page,
        limit,
      };
    },
  },
  methods: {
    async fetchData() {
      const res = await getBlog({ ...this.routerInfo });
      return res.data;
    },
  },
};
</script>

<style scoped lang="less">
.blog-container {
  width: 100%;
  height: 100%;
}
</style>
